<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <include file="public@head" />

    <style>
        .user_input_wrap{
            margin-top: 14px;
        }
        .user_input_wrap img{
            width: 34px;
            height: 34px;
            border-radius: 17px;
            margin-top: 2px;

        }
        .sc_list_box{
            border: none;
        }
        .user_input_wrap .user_input{
            outline: none;
            resize:none;
            /*border-style: none;*/
            box-shadow: none;
            text-decoration: none;
            /*border-width: 0px;*/
            word-wrap: break-word;
            /*line-height: 18px;*/
            padding: 10px 6px 0 10px;
            width: 580px;
            height: 28px;
            line-height: 16px;
            border: 1px solid #ccc;
            background: #f9f9f9;
            border-radius: 4px;
            overflow: auto;
        }
       /* .detail_comment_wrap .user_input_focus{
            height: 100px;
            overflow: auto;
        }*/
        .new_comment{
            margin-bottom: 20px;
        }
        .new_comment span.cancel_btn,.main_comment span.cancel_btn{
            color: #999;
            font-size: 16px;
            margin-top: 26px;
            cursor: pointer;

        }
        .new_comment span.send_btn,.main_comment span.send_btn{
            width: 68px;
            height: 40px;
            line-height: 40px;
            color: #fff;
            text-align: center;
            background: #04dd98;
            margin: 14px 0 0 30px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;

        }
        .comments_wra{
            clear: both;
        }

        .comments_wra li img{
            width: 34px;
            height: 34px;
            border-radius: 17px;
            margin-right: 10px;

        }
        .main_comment{
            padding-bottom: 20px;
        }


        .info .name{
            color: #333;
            font-size: 14px;

        }
        .info .time{
            color: #ccc;
            font-size: 12px;

        }
        li.comment_list{
            padding: 20px 0 0px 0;
            border-top: 1px solid #ebebeb;
        }
        .auth_comment .comment{
            padding: 20px 0 12px 0;
            line-height: 20px;
            color: #666;
        }
        .sub_comment_list .comment{
            padding: 10px 0 8px;
            line-height: 20px;
            color: #666;
        }
        .auth_comment .comment,.auth_comment .sub_tool_group{
            padding-left: 44px;
        }

        .sub_tool_group{
            margin-bottom: 14px;
        }

        .sub_tool_group .reply_btn{
            color: #669966;
            cursor: pointer;
        }

        .sub_comment_list{
            border-left: 1px solid #e8e8e8;
            margin-left: 44px;
            padding-left: 16px;
        }

        .sub_comment .name{
            color: #80aa9d;
            margin-right: 14px;
        }


    </style>

</head>
<body>
<include file="public@nav" />

<div class="center cirWrapper clearfix">


    <div class="sc_detail_wra">
        <!--明星发表的动态-->
        <div class="sc_list_box">
            <!--<div class="sc_title clearfix">
                <a href="javascript:void(0)"><img class="star_img fl" src="__TMPL__public/assets/img/user_img.png" alt=""></a>
                <div class="fl">
                    <h4 class="star_name">韩雪</h4>
                    <p class="star_publish_time">2小时前</p>
                </div>
            </div>
            <p class="star_publish_txt"><a href="##">新的一年～是不是该把头发留长了？ </a></p>
            <div class="imgWra clearfix">
                <img src="__TMPL__public/assets/img/user_img.png" alt="">
                <img src="__TMPL__public/assets/img/user_img.png" alt="">
                <img src="__TMPL__public/assets/img/user_img.png" alt="">
                <img src="__TMPL__public/assets/img/user_img.png" alt="">
                <img src="__TMPL__public/assets/img/user_img.png" alt="">
                <img src="__TMPL__public/assets/img/user_img.png" alt="">
            </div>
            <ul class="sc_row_line clearfix">
                <li>
                    <span>2.3万</span>
                    <i class="ic_praise"></i>
                </li>
                <li>
                    <span>320</span>
                    <i class="ic_comment"></i>
                </li>
                <li>
                    <span>2.3万</span>
                    <i class="ic_share"></i>
                </li>
            </ul>-->
            <!--
            <div class="publish_wrap publish_wrap_focus">
                <img class="user_img" src="__TMPL__public/assets/img/user_img.png" alt="">
                <textarea name="" id="" class="user_input user_input_focus" cols="30" rows="10"></textarea>
            </div>-->

            <div class="main_comment clearfix displayNone">
                <div class="clearfix user_input_wrap">
                    <img class=" fl" src="" alt="">
                    <!--user_input_focus-->
                    <textarea placeholder="我也来说两句" name="" id="" class="user_input fr" cols="30" rows="10"></textarea>
                </div>
                <span id="send_btn_main" class="fr send_btn">评论</span>
                <span class="fr cancel_btn">取消</span>
            </div>
        </div>

        <!--评论列表-->
        <ul class="comments_wra clearfix">
               <!-- <div class="user_info fl">
                    <img class="fl" src="__TMPL__public/assets/img/user_img.png" alt="">
                    <div class="fl">
                        <p class="user_name">
                            贝贝猫<span class="lv_user_mark"></span>:
                        </p>
                        <p class="user_comments_time">2小时前</p>
                    </div>
                </div>
                <p class="user_comments fl">
                    测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
                </p>-->
        </ul>
        <p class="advance_more"></p>

        <div id="page-wrap"></div>

</div>
<include file="public@footer" />
<include file="public@scripts" />

<script>
    headerMove(2);
    $(function(){


        layui.use('laypage', function(){
            var laypage = layui.laypage;
            //执行一个laypage实例
            $(".user_input_wrap img").attr("src",localStorage.u_avatar);
    //        sc_list_box
            var cid = iService.getQueryString("cid");
            var comments_wra = $(".comments_wra");
            var comment_input_move = function(){
                var comment_input = $(".user_input");
                comment_input.off("focus").on("focus",function(){
                    $(this).stop().animate({"height":"90px"}, "fast");
                });
                comment_input.off("blur").on("blur",function(){
                    if($(this).val()==""){
                        $(this).stop().animate({"height":"28px"}, "fast");
                    }
                });
            };
            var reply_fun = function(){
                var user_name = localStorage.u_nickname;
                comment_input_move();
    //            var reply_btn = $(".sub_comment_list .reply_btn");
                comments_wra.on("click",".reply_btn",function(){
                    var reply_name = $(this).data("name");
                    var c_udid = $(this).data("c_udid");
                    var parentid = $(this).data("c_parudid");
                    var input_wrap =  $(this).parents(".comment_list").children(".new_comment");
                    input_wrap.slideDown();
                    input_wrap.find(".user_input").attr("placeholder",user_name+"回复"+reply_name);
                    input_wrap.find(".user_input").attr({"data-c_udid":c_udid,"data-user_name":user_name,"data-reply_name":reply_name,"data-parentid":parentid});
                });
                comments_wra.on("click",".new_comment .send_btn",function(){
                    var send_this = $(this);
                    var description = $(this).parents(".new_comment").find(".user_input").val();
                    var pudid = $(this).parents(".new_comment").find(".user_input").data("c_udid");
                    var user_name = $(this).parents(".new_comment").find(".user_input").data("user_name");
                    var reply_name = $(this).parents(".new_comment").find(".user_input").data("reply_name");
                    var parentid = $(this).parents(".new_comment").find(".user_input").data("parentid");
                    var comList_param = {
                        url:'Circles/comSend',
                        data:{
                            cid: cid,
                            description: description,
                            parent: parentid,
                            pudid: pudid,
                            type: 20
                        }
                    };
                    $.JsonRpc(comList_param,function(data){
                        var sub_comment_list = send_this.parents(".comment_list").find(".sub_comment_list");
                        var tpl =
                                '<div class="sub_comment">'+
                                    '<div class="info">'+
                                    '<span class="name">'+user_name+"：回复"+reply_name+'</span><span class="time">'+new Date(parseInt(data.time) * 1000).toLocaleString().replace(/:\d{1,2}$/,'')+'</span>'+
                                    '</div>'+
                                    '<p class="comment">'+data.content.description+'</p>'+
                                    '<div class="sub_tool_group clearfix">'+
                                '<span data-name="'+user_name+'" data-c_udid="'+pudid+'" class="reply_btn fl">回复</span>'+
                                '<span class="detel_btn fr">删除</span>'+
                                    '</div>'+
                                '</div>';
                        $(tpl).prependTo(sub_comment_list);
                        send_this.parents(".new_comment").find(".user_input").val("");
                        comment_input_move();
    //                    .find(".comment_list")
    //                    .sub_comment_list
                    });
                });
                comments_wra.on("click",".new_comment .cancel_btn",function(){
                    $(this).parents(".new_comment").slideUp();
                    $(this).parents(".new_comment").find(".user_input").val("").trigger("blur");
                });

                comments_wra.on("click",".main_comment .cancel_btn",function(){
                    $(this).parents(".main_comment").find(".user_input").val("").trigger("blur");
                });
            };

            var firstFlag = true;
            function getMainData(page_cur){
                //主帖
                var comList_param = {
                    url:'Circles/comList',
                    data:{
                        cid: cid,
                        type:"20",
                        page:page_cur
                    }
                };
                $.JsonRpc(comList_param,function(data){
                    console.log(data);
                    var result = data.data;
                    var page = data.content.page;
                    data = result.list;


                    //主贴
                    function loadMainView(){
                        laypage({
                            cont: 'page-wrap' //注意，这里的 test1 是 ID，不用加 # 号
                            ,pages: result.num/numDefine.page_per //数据总数，从服务端得到
                            ,jump: function(obj, first){
                                //得到了当前页，用于向服务端请求对应数据
                                if(!first){
                                    console.log(obj);
                                    var curr = obj.curr;
                                    getMainData(curr);
                                    //do something
                                }

                            }
                        });

                        var img_all = "",li_all="";
                        var img_arr = [];
                        if(result.c_images){
                            img_arr = String(result.c_images).split(",");
                            for(var i=0;i<img_arr.length;i++){
                                img_all += '<a class="fl big-cursor" href="javascript:void(0)"><img src="'+img_arr[i]+'" alt=""></a>';
                                li_all +=
                                    '<li class="fl" data-src="'+img_arr[i]+'">'+
                                    '<a href="javascript:;" class="fl">'+
                                    '<img class="S_line2" src="'+img_arr[i]+'" alt="">'+
                                    '</a>'+
                                    '</li>';
                            }
                        }

                        var likeClassName = "";
                        (result.booked==10)?likeClassName = "active":likeClassName = "";
                        var tpl_main =
                            '<div class="sc_list_box" id="cid'+result.cid+'">'+
                            '<div class="sc_title clearfix">'+
                            '<img class="star_img fl" src="'+result.u_avatar+'" alt="">'+
                            '<div class="fl">'+
                            '<h4 class="star_name">'+result.u_nickname+'</h4>'+
                            '<p class="star_publish_time">'+iService.timeFormat(result.c_createtime)+'</p>'+
                            '</div>'+
                            '</div>'+
                            '<p class="star_publish_txt">'+result.c_content+'</p>'+
                            '<div class="imgWra clearfix">'+
                            img_all+
                            '</div>'+
                            '<div class="dn_media_view displayNone">'+
                            '<div class="media_show_box" data-pic-length="'+img_arr.length+'" data-cur-index="">'+
                            '<img src="" alt="">'+
                            '</div>'+
                            '<div class="pic_choose_box">'+
                            '<div class="stage_box">'+
                            '<ul class="choose_box clearfix" style="margin-left: 1px;">'+
                            li_all+
                            '</ul>'+
                            '</div>'+
                            '</div>'+
                            '</div>'+
                            '<ul class="sc_row_line clearfix">'+
                            '<li>'+
                            '<span class="c_like">'+result.c_like+'</span>'+
                            '<i class="ic_praise '+likeClassName+'" data-cid="'+cid+'"></i>'+
                            '</li>'+
                            '<li>'+
                            '<span>'+result.c_comment+'</span>'+
                            '<i class="ic_comment"></i>'+
                            '</li>'+
                            '<li>'+
                            '<span>'+result.c_share+'</span>'+
                            '<i class="ic_share"></i>'+
                            '</li>'+
                            '</ul>'+
                            '</div>';
                        $(tpl_main).prependTo(".sc_list_box");
                        $(".main_comment").removeClass("displayNone");


                        view_original_pic();
                        function view_original_pic(){

                            $(".imgWra a").on("click",function(){
                                var cur_index = $(this).index();
                                var cur_src = $(this).children("img").attr("src");
                                $(this).parents(".imgWra").siblings(".dn_media_view").show();
                                $(this).parents(".imgWra").siblings(".dn_media_view").find(".media_show_box").attr("data-cur-index",cur_index);
                                $(this).parents(".imgWra").hide();
                                $(this).parents(".imgWra").siblings(".dn_media_view").find(".media_show_box img").attr("src",cur_src);
                                $(this).parents(".imgWra").siblings(".dn_media_view").find(".choose_box li").eq(cur_index).addClass("current").siblings("li").removeClass("current");


                            });


                            function getX(obj){
                                var parObj=obj;
                                var left=obj.offsetLeft;
                                while(parObj=parObj.offsetParent){
                                    left+=parObj.offsetLeft;
                                }
                                return left;
                            }

                            function getY(obj){
                                var parObj=obj;
                                var top=obj.offsetTop;
                                while(parObj = parObj.offsetParent){
                                    top+=parObj.offsetTop;
                                }
                                return top;
                            }

                            function DisplayCoord(media_show_wrap,event){
                                var top,left,oDiv,cur_index,cur_length,pos_x;
                                oDiv=media_show_wrap;
                                top=getY(oDiv);
                                left=getX(oDiv);
                                pos_x = (event.clientX-left+document.body.scrollLeft);
                                cur_index = $(oDiv).attr("data-cur-index");
                                cur_length = $(oDiv).attr("data-pic-length")-1;
                                //                    console.log(cur_index+"==="+cur_length);
                                $(oDiv).removeClass("small-cursor").removeClass("right-cursor").removeClass("left-cursor");
                                if(pos_x<200&&cur_index>0){
                                    $(oDiv).addClass("left-cursor");
                                }else if(pos_x>=200&&pos_x<=440){
                                    $(oDiv).addClass("small-cursor");
                                }else if(pos_x>440&&cur_index<cur_length){
                                    $(oDiv).addClass("right-cursor");
                                }
                                //        document.getElementById("mp_y").innerHTML = (event.clientY-top+document.body.scrollTop) -2+"px";
                            }
                            $(".media_show_box").on("mousemove",function(e){
                                DisplayCoord(this,e);
                            });

                            $(".media_show_box").on("click",function(e){
                                DisplayCoord(this,e);
                            });

                            $(".dn_media_view").on("click",".right-cursor",function(){
                                var cur_index,cur_li,cur_src;
                                cur_index = parseInt($(this).attr("data-cur-index"))+1;
                                $(this).attr("data-cur-index",cur_index);
                                cur_li = $(this).parents(".dn_media_view").children(".pic_choose_box").find(".choose_box li").eq(cur_index);
                                cur_li.addClass("current").siblings("li").removeClass("current");
                                cur_src = cur_li.attr("data-src");
                                $(this).children("img").attr("src",cur_src);
                            });
                            $(".dn_media_view").on("click",".left-cursor",function(){
                                var cur_index,cur_li,cur_src;
                                cur_index = $(this).attr("data-cur-index")-1;
                                $(this).attr("data-cur-index",cur_index);
                                cur_li = $(this).parents(".dn_media_view").children(".pic_choose_box").find(".choose_box li").eq(cur_index);
                                cur_li.addClass("current").siblings("li").removeClass("current");
                                cur_src = cur_li.attr("data-src");
                                $(this).children("img").attr("src",cur_src);
                            });
                            $(".dn_media_view").on("click",".small-cursor",function(){
                                $(this).parents(".dn_media_view").siblings(".imgWra").show();
                                $(this).parents(".dn_media_view").hide();
                            });

                            $(".choose_box li").on("click",function(){
                                var cur_src,cur_index;
                                cur_src = $(this).attr("data-src");
                                cur_index = $(this).index();
                                $(this).addClass("current").siblings("li").removeClass("current");
                                $(this).parents(".dn_media_view").children(".media_show_box").attr("data-cur-index",cur_index);
                                $(this).parents(".dn_media_view").children(".media_show_box").children("img").attr("src",cur_src);
                            });

                        }

                        //点赞帖子
                        $(".ic_praise").off("click").on("click",function(){
                            var ic_prize_now = $(this);
                            var cid = $(this).data("cid");
                            var praise_param = {
                                url:'Circles/likeCircle',
                                data:{
                                    cid: cid
                                }
                            };
                            $.JsonRpc(praise_param,function(data){
                                if(data.code==200){
                                    if(data.data.status==10){
                                        ic_prize_now.addClass('layui-anim layui-anim-scaleSpring active');
                                        ic_prize_now.siblings(".c_like").html(data.data.number);
                                    }else if(data.data.status==20){
                                        ic_prize_now.removeClass('layui-anim layui-anim-scaleSpring active');
                                        ic_prize_now.siblings(".c_like").html(data.data.number);
                                    }
                                }
                            })
                        });
                    }
                    if(parseInt(page)===1&&firstFlag){
                        loadMainView();
                        firstFlag = false;
                    }
                    //主贴结束

                    var tpl = "";
                    $.each(data,function(i){
                        tpl +=
                            '<li class="clearfix comment_list">'+
                            '<div class="auth_comment">'+
                            '<img class="fl auth_pic" src="'+data[i].u_avatar+'" alt="">'+
                            '<div class="info fl">'+
                            '<p class="name">'+data[i].u_nickname+'</p>'+
                            '<p class="time">'+data[i].c_createtime.slice(0,16)+'</p>'+
                            '</div>'+
                            '<p class="comment" style="clear:both">'+data[i].c_content+
                            '</p>'+
                            '<div class="sub_tool_group clearfix">'+
                            '<span data-name="'+data[i].u_nickname+'" data-cid="'+data[i].cid+'" data-c_udid="'+data[i].c_udid+'" data-c_parudid="'+data[i].cid+'" class="reply_btn fl">回复</span>'+
                            //                                    '<span class="detel_btn fr">删除</span>'+
                            '</div>'+
                            '</div>'+
                            '<div class="sub_comment_list">';

                        if(data[i].children){
                            for(var k=0;k<data[i].children.length;k++){
                                tpl +=
                                    '<div class="sub_comment">'+
                                    '<div class="info">'+
                                    '<span class="name">'+data[i].children[k].cnickname+"：回复"+data[i].children[k].pnickname+'</span><span class="time">'+data[i].children[k].c_createtime.slice(0,16)+'</span>'+
                                    '</div>'+
                                    '<p class="comment">'+data[i].children[k].c_content+'</p>'+
                                    '<div class="sub_tool_group clearfix">'+
                                    '<span data-name="'+data[i].children[k].cnickname+'"  data-cid="'+data[i].children[k].cid+'" data-c_udid="'+data[i].children[k].c_udid+'" data-c_parudid="'+data[i].children[k].c_parent+'" class="reply_btn fl">回复</span>'+
                                    //                            '<span class="detel_btn fr">删除</span>'+
                                    '</div>'+
                                    '</div>';
                            }
                        }
                        tpl +=
                            '</div>'+
                            '<!--评论input-->'+
                            '<div class="new_comment clearfix displayNone">'+
                            '<div class="clearfix user_input_wrap">'+
                            '<textarea placeholder="" name="" id="" class="user_input fr" cols="30" rows="10"></textarea>'+
                            '</div>'+
                            '<span class="fr send_btn">回复</span>'+
                            '<span class="fr cancel_btn">取消</span>'+
                            '</div>'+
                            '</li>';
                    });
                    $(".comments_wra").html(tpl);
                    reply_fun();
                });
            }
            getMainData(1);
            //主评论
            var send_btn_main = $("#send_btn_main");
            send_btn_main.on('click',function(){
                var comList_param = {
                    url:'Circles/comSend',
                    data:{
                        cid: cid,
                        description: $(".main_comment .user_input").val(),
                        parent: 0,
                        pudid: 0,
                        type: 20
                    }
                };
                $.JsonRpc(comList_param,function(data){
                    if(data.code==200){
                        data = data.data;

                        var tpl =
                                '<li class="clearfix comment_list">'+
                                '<div class="auth_comment">'+
                                '<img class="fl auth_pic" src="'+data.comment.u_avatar+'" alt="">'+
                                '<div class="info fl">'+
                                '<p class="name">'+data.comment.u_nickname+'</p>'+
                                '<p class="time">'+data.comment.c_createtime.slice(0,16)+'</p>'+
                                '</div>'+
                                '<p class="comment" style="clear:both">'+data.comment.c_content+
                                '</p>'+
                                '<div class="sub_tool_group clearfix">'+
                                '<span data-name="'+data.comment.u_nickname+'" data-cid="'+data.comment.cid+'" data-c_udid="'+data.comment.c_udid+'" data-c_parudid="'+data.comment.cid+'" class="reply_btn fl">回复</span>'+
        //                        '<span class="detel_btn fr">删除</span>'+
                                '</div>'+
                                '</div>'+
                                '<div class="sub_comment_list">'+
                                '</div>'+
                                '<!--评论input-->'+
                                '<div class="new_comment clearfix displayNone">'+
                                '<div class="clearfix user_input_wrap">'+
                                '<textarea placeholder="" name="" id="" class="user_input fr" cols="30" rows="10"></textarea>'+
                                '</div>'+
                                '<span class="fr send_btn">回复</span>'+
                                '<span class="fr cancel_btn">取消</span>'+
                                '</div>'+
                                '</li>';
                        $(tpl).prependTo(".comments_wra");
                        $(".main_comment .user_input").val("");
                        comment_input_move();
                    }
                });
            });
        });

    });

</script>
</body>
</html>























